<!--
 * @Descripttion: 会话新建工单、事件、pass
 * @version: 
 * @Author: 王也
 * @Date: 2022-03-28 17:36:58
 * @LastEditors: huangbc
 * @LastEditTime: 2023-03-20 11:24:57
-->

<template>
  <el-dropdown trigger="click">
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="small"
      v-track="$track.formatParams('CREATE_PROCES', null, from === 'imDetail' ? 'DETAIL_BTNS_GROUP' : undefined)"
      style="border-radius: 4px;"
    >
      {{$t('common.base.create')}}
    </el-button>
    <el-dropdown-menu slot="dropdown" class="dropdown-menu">
      <template v-for="(type, index) in modulesList">
        <el-dropdown-item v-if="type.show" :key="index">
          <div
            class="paas-list-item"
            v-if="type.type === 'pass'"
            @click="handelClick(type,type.type)"
          >
            {{ type.name }}
          </div>
          <el-popover placement="right" width="82" trigger="hover" v-else>
            <ul class="task-list">
              <li
                class="task-list-item"
                v-for="item in type.children"
                :key="item.id"
                @click="handelClick(item,type.type)"
              >
                <span class="text">{{ item.name }}</span>
              </li>
            </ul>
            <div slot="reference">{{ type.name }}</div>
          </el-popover>
        </el-dropdown-item>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import ChatMixin from '@src/modules/im/ChatMixin';
import { mapState } from 'vuex';
/* version control mixin */
import { VersionControlTaskMixin } from '@src/mixins/versionControlMixin'

export default {
  name: 'new-construction-by-im',
  props:{
    userDetail: {
      type: Object,
      default: () => ({}),
    },
    from: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  mixins: [ChatMixin, VersionControlTaskMixin],
  computed: {
    ...mapState(['operationalData', 'operationalDataByPass']),
    modulesList() {
      let allList = []
      let passList = []
      const taskTypeInfo = this?.operationalData?.taskTypeInfo ?? []
      const eventTypeInfo = this?.operationalData?.eventTypeInfo ?? []
      const operationalDataByPass = this?.operationalDataByPass ?? []
      allList = [
        {
          name: this.$t('common.base.task'),
          children: taskTypeInfo,
          type: 'task',
          show: this.allowCreateTask && this._isShowTaskModule,
        },
        {
          name: this.$t('common.base.event'),
          children: eventTypeInfo,
          type: 'event',
          show: this.allowCreateEvent,
        },
      ];
      passList = operationalDataByPass?.map(v => {
        return {
          ...v,
          name: v.menuName,
          type: 'pass',
          show: true,
        };
      });
      return [...allList, ...passList];
    },
  },
  methods: {
    handelClick(item, type){
      const {customerId, conversationNo, linkmanId} = this.userDetail
      switch (type){
      case 'task':
        this.createTask(customerId, conversationNo, item.id, true, linkmanId)
        break;
      case 'event':
        this.createEvent(customerId, conversationNo, item.id, true, linkmanId)
        break;
      case 'pass':
        this.createPass({...item})
        break;
      default:
        console.log('err')
      }
      
    },
  },
};
</script>

<style scoped lang="scss">
.dropdown-menu {
  text-align: center;
}
.el-dropdown-item{
  padding: 0 !important;
}
.el-popover__reference, .paas-list-item{
  min-width: 80px;
  padding: 0 10px;
  text-align: left;
}
.el-dropdown-menu{
  max-height: 95%;
  overflow-y: auto;
}
.task-list {
  padding: 0;
}
.task-list-item {
  line-height: 30px;
  cursor: pointer;
}
.task-list-item:hover {
  background: $color-primary-light-1;
  color: $color-primary-light-6;
}
</style>
